<template>
  <div class="container">
    <el-collapse>
      <el-collapse-item title="用户须知" name="1">
        <div style="border: 1px solid #e5e5e5; border-radius: 15px; padding: 20px">
          <el-form label-width="160px" :model="form">
            <el-form-item prop="userInstructions">
              <Editor ref="editorBar" v-if="dialogVisible" v-model="form.userInstructions"></Editor>
            </el-form-item>
          </el-form>
          <el-row style="
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: center;
            ">
            <el-button type="primary" @click="handleUserInstructions('userInstructions')">确定</el-button>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="用户协议及隐私政策" name="2">
        <div style="border: 1px solid #e5e5e5; border-radius: 15px; padding: 20px">
          <el-form label-width="160px">
            <el-form-item prop="userAgreement">
              <Editor ref="editorBar" v-if="dialogVisible" v-model="form.userAgreement"></Editor>
            </el-form-item>
          </el-form>
          <el-row style="
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: center;
            ">
            <el-button type="primary" @click="handleUserInstructions('userAgreement')">确定</el-button>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4" title="用户知情同意书">
        <div style="border: 1px solid #e5e5e5; border-radius: 15px; padding: 20px">
          <el-form label-width="160px">
            <el-form-item label="" prop="userInformedConsentForm">
              <Editor ref="editorBar" v-model="form.userInformedConsentForm" v-if="dialogVisible"></Editor>
            </el-form-item>
          </el-form>
          <el-row style="
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: center;
            ">
            <el-button type="primary" @click="handleUserInstructions('userInformedConsentForm')">确定</el-button>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item name="5" title="医护人员承诺书">
        <div style="border: 1px solid #e5e5e5; border-radius: 15px; padding: 20px">
          <el-form label-width="160px">
            <el-form-item label="" prop="letterCommitment">
              <Editor ref="editorBar" v-model="form.letterCommitment" v-if="dialogVisible"></Editor>
            </el-form-item>
          </el-form>
          <el-row style="
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: center;
            ">
            <el-button type="primary" @click="handleUserInstructions('letterCommitment')">确定</el-button>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import Editor from "@/components/editor.vue";
import { ApiSetConfig, ApiGetConfig } from "@/api/index";
export default {
  components: {
    Editor,
  },
  data() {
    return {
      form: {
        userInstructions: "",
        userAgreement: "",
        userInformedConsentForm: "",
        dialogVisible: false,
        //承诺书
        letterCommitment: ''
      },
      dialogVisible: false,
    };
  },
  mounted() {
    this.handleGetConfig();
  },
  methods: {
    //用户须知
    handleUserInstructions(val) {
      let query = {
        key: val,
        value: this.form[val],
      };
      ApiSetConfig(query).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
        }
      });
    },
    handleGetConfig() {
      ApiGetConfig().then((res) => {
        res.data.forEach((item) => {
          for (const key in this.form) {
            this.$set(this.form, item.key, item.value);
          }
          /* if (item.key == "userInstructions") {
            this.$set(this.form, "userInstructions", item.value);
          } */
        });
        console.log(this.form);
      });
      setTimeout(() => {
        this.dialogVisible = true;
      }, 1500);
    },
    /*     handleSetPhone() {}, */
  },
};
</script>

<style></style>
